<template>
  <div class="page payMsg">
    <div class="weui-msg">
      <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
        <h2 class="weui-msg__title">恭喜你消费成功</h2>
      </div>
      <div class="weui-msg__opr-area">
        <div class="j-rate-box">
          <div class="weui-flex" >
            <div class="weui-flex__item">
              <div class="rate-name-title">请对本次加油进行评分:</div>
            </div>
          </div>
          <div class="weui-flex" v-for="item in rateValue">
            <div class="rate-name">{{item.name}}</div>
            <div class="weui-flex__item">
              <rate v-model="item.value" :colors="['#09bb07', '#09bb07', '#09bb07']" show-text></rate>
            </div>
          </div>
          <div class="weui-flex" >
            <div class="weui-flex__item">
              <div class="rate-name-title">你的建议:</div>
            </div>
          </div>
          <div class="weui-flex textarea-box">
            <div class="weui-flex__item">
              <textarea v-model="textareaContent" class="textarea"></textarea>
            </div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item">
              <div class="msg">提示:请提出中肯的意见</div>
              <a href="javascript:;" @click="submit" class="weui-btn weui-btn_mini weui-btn_primary">提交</a>
            </div>
          </div>
        </div>
      </div>
      <div class="share line-top">
        分享到朋友圈可获取加油红包<span href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" @click="share">分享</span>
      </div>
    </div>
    <div class="content-msg" v-if="isComment">
      <div class="content-box">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="name color-1">{{getComment.gsName}}</div>
            <rate v-model="getComment.serviceLevel"
                  disabled
                  show-text
                  :colors="['#28be58', '#28be58', '#28be58']"
                  text-color="#28be58"
                  text-template="{value}"></rate>
            <div class="content"><span class="_n">内容:</span><p class="color-2">{{getComment.content}}</p></div>
          </div>
        </div>
      </div>
    </div>
    <div class="share_box" v-if="isShare" @click="isShare=false"></div>
  </div>
</template>
<script>
  import rate from '~components/mixins/rate.vue'
  const util = require('~src/lib/util')
  import { mapGetters } from 'vuex'
  export default {
    name: 'pay-ok',
    data () {
      return {
        textareaContent: '',
        isShare: false,
        isComment: false,
        gsId: '',
        config: {},
        rateValue: [{
          name: '服务态度',
          value: null
        },
        {
          name: '油品质量',
          value: null
        },
        {
          name: '平台体验',
          value: null
        }]
      }
    },
    computed: {
      ...mapGetters({
        getWxSdk: 'globla/getWxSdk',
        getComment: 'getComment',
        getGasstationInfo: 'getGasstationInfo',
        getShareInfo: 'globla/getShareInfo',
        getRefuelingshow: 'getRefuelingshow'
      })
    },
    components: {
      rate
    },
    watch: {
      getComment (val) {
        if (val) {
          this.isComment = true
          this.rateValue.forEach(function (val) {
            val.value = 0
          })
          this.config = {}
        }
      },
      getWxSdk (val) {
        if (val) {
          wx.config({
            debug: true,
            appId: val.appId,
            timestamp: val.timestamp,
            nonceStr: val.nonceStr,
            signature: val.signature,
            jsApiList:['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
          })
        }
      },
      getRefuelingshow (val) {
        this.gsId = val.gsId
        if (util.isEmptyObject(this.getShareInfo)) {
          this.$store.dispatch('globla/getShareInfo',val.gsId)
        }
        if (util.isEmptyObject(this.getGasstationInfo)) {
          this.$store.dispatch('getGasstationInfo', val.gsId)
        }
      },
      getShareInfo (val) {
        var _this =  this
        var cart = JSON.parse(util.localItem.get('cart'))
        if (val) {
          wx.ready(function(){
            wx.onMenuShareAppMessage({
              title: val.title, // 分享标题
              desc: val.desc,
              type: "link",
              link: val.link, // 分享链接
              imgUrl: val.imgUrl, // 分享图标
              success: function () {
                var config = {
                  gsId: _this.gsId,
                  orderNo:_this.$route.query.orderNo
                }
                if (_this.getGasstationInfo.config.isShare === '1') {
                  _this.$store.dispatch('globla/getShareCoupon',config)
                } else {
                  alert('不执行')
                }
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
                _this.$store.dispatch('TOAST_SHOW',  {content: '取消分享', msg: true})
              },
              fail: function (res) {
                alert(JSON.stringify(res));
              }
            });
            wx.onMenuShareTimeline({
              title: val.title, // 分享标题
              link: val.link, // 分享链接
              imgUrl: val.imgUrl, // 分享图标
              success: function () {
                var config = {
                  gsId: _this.gsId,
                  orderNo:this.$route.query.orderNo
                }
                _this.$store.dispatch('globla/getShareCoupon',config)
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
                _this.$store.dispatch('TOAST_SHOW',  {content: '取消分享', msg: true})
              },
              fail: function (res) {
                alert(JSON.stringify(res));
              }
            });
          })
        }
      }
    },
    mounted () {
      if (util.isEmptyObject(this.getWxSdk)) {
        this.$store.dispatch('globla/getWxSdk',window.location.href)
      }
      if (util.isEmptyObject(this.getRefuelingshow)) {
        this.$store.dispatch('getRefuelingshow', this.$route.query.orderNo)
      }
      this.$store.dispatch('getCommentShow',this.$route.query.orderNo)
    },
    methods: {
      submit () {
       this.config = {
         openid:util.localItem.get('openid'),
         orderNo:this.$route.query.orderNo,
         environmentLevel:this.rateValue[0].value,
         serviceLevel:this.rateValue[1].value,
         gasQualityLevel:this.rateValue[2].value,
         content: this.textareaContent
       }
        this.$store.dispatch('getContent', this.config)
      },
      share () {
        this.isShare =  true
      }
    }
  }
</script>
<style lang="scss">
.payMsg{
  .share_box{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,.7);
    background-image: url('/static/images/share.png');
    background-position: center 10px;
    background-size:264px 301px;
    background-repeat: no-repeat;
  }
  .content-msg{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,.7);
    .content-box{
      position: absolute;
      bottom:0;
      left:0;
      right:0;
      padding:5px 0;
      background-color:#fff;
      .content{
        overflow:hidden;
      }
      .name{
        float:left;
        margin-right:10px;
      }
      .j-rate{
        overflow: hidden;
        text-align:right;
        padding:3px 0;
      }
      ._n{
        float: left;
        margin-right:2px;
      }
      p{
        overflow: hidden;
        padding-top:2px;
        color:#666;
        line-height:20px;
      }
    }
  }
  .weui-msg__text-area{
    margin-bottom:10px;
  }
  .weui-msg__icon-area{
    margin-bottom:15px;
  }
  .j-rate__icon{
    font-size:20px;
  }
  .j-rate-box{
    margin:0 auto;
    width:280px;
    .j-rate{
      text-align: left;
      margin-top:1px;
    }
    .weui-flex{
      padding:5px 0;
    }
    .rate-name-title{
      text-align:left;
      font-size:14px;
      padding-bottom:5px;
    }
    .rate-name{
      font-size:14px;
      width:120px;
      text-align: left;
      color:#666;
    }
    .textarea-box{
      border:1px solid #eee;
      background-color:#fff;
      text-align: left;
      .textarea{
        width:264px;
        height:100px;
        padding:0 6px;
        resize: none;
        border:none;
        font-size:14px;
      }
    }
    .weui-btn{
      float:right;
    }
    .msg{
      font-size:12px;
      float:left;
      line-height:30px;
    }
  }
  .share{
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    background-color:#fff;
    line-height:30px;
    font-size:14px;
    padding:10px 0;
    .weui-btn{
      vertical-align:middle;
      margin-left:15px;
    }
  }
}
</style>
